<!DOCTYPE html>
<html lang="en">

<head>

    {{template "common/head.html" .}}

    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
        }
        .page-register {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: -webkit-radial-gradient(circle, #fedd04, #fec305);
            background: radial-gradient(circle, #fedd04, #fec305);
        }
        .page-register-bg {
            position: absolute;
            background-image: url(/static/front/images/bg.png);
            background-size: cover;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
        .page-register-logo {
            margin: 84px auto 0 auto;
            width: 123px;
            height: 67px;
            background-image: url(/static/front/images/slogan.png);
            background-size: cover;
        }
        .page-register-form {
            width: 260px;
            margin-left: auto;
            margin-right: auto;
        }
        .page-register-form-item {
            margin-top: 10px;
        }
        .page-register .subject {
            padding: 7px 18px 8px 16px !important;
            height: 32px;
            border-radius: 3px !important;
        }
        .page-register-select-group {
            width: 100%;
        }
        .page-register-select-group select {

            min-width: 70px;
            -webkit-box-flex: 0;
            -webkit-flex: 0 0 70px;
            -ms-flex: 0 0 70px;
            flex: 0 0 70px;
            margin-right: 10px;
        }
        .page-register-select-group  {
            width: 100%;
            /* overflow: hidden;
             */
            justify-content: space-between
        }
        .page-register-select-group .style-select {
            -webkit-box-flex: 0 0 30%;
            -webkit-flex: 0 0 30%;
            -ms-flex: 0 0 30%;
            flex: 0 0 30%;
        }
        .m-input-label {
            flex: 0 0 36% !important;
        }
        .m-input input {
            flex: 0 0 64% !important;
        }
        .m-input-label-1 {
            font-size: 12px;
            -webkit-box-flex: 0;
            -webkit-flex: 0 0 30%;
            -ms-flex: 0 0 30%;
            flex: 0 0 100%;
            line-height: 12px;
            font-weight: 600;
        }
    </style>

</head>

<body>
<div class="page-register">
    <div class="page-register-bg">
        <form id="data-form">
            {{.xsrfdata}}
            <input type="hidden" id="student_relation" name="student_relation_id" value="">
            <div class="page-register-logo"></div>
            <div class="ui-mg-t-24 page-register-form">
                <div class="page-register-form-item">
                    <div class="m-input-wrapper m-input-has-floating-label">
                        <div flex="" class="m-input m-input-text m-input-floating-label">
                            <span class="m-input-label">您的手机号：</span>
                            <input id="phone" name="phone" type="text" placeholder="">
                        </div>
                    </div>
                </div>
                <div class="page-register-form-item">
                    <div class="m-input-wrapper m-input-has-floating-label">
                        <div flex="" class="m-input m-input-text m-input-floating-label">
                            <span class="m-input-label">验证码：</span>
                            <input id="verify_code" name="verify_code" type="text" placeholder="">
                        </div>
                    </div>
                </div>
                <div class="page-register-form-item" style="width: 31vw;">
                    <div class="m-input-wrapper m-input-has-floating-label">
                        <div flex="" class="m-input m-input-text m-input-floating-label">
                            <span class="m-input-label-1" onclick="getVerifyCode()" id="get-verify-code">点击获取验证码</span>
                        </div>
                    </div>
                </div>
                <div class="page-register-form-item">
                    <div class="m-input-wrapper m-input-has-floating-label">
                        <div flex="" class="m-input m-input-text m-input-floating-label">
                            <span class="m-input-label">您的姓名：</span>
                            <input id="real_name" name="real_name" type="text" placeholder="">
                        </div>
                    </div>
                </div>
                <div class="page-register-form-item">
                    <div class="m-input-wrapper m-input-has-floating-label">
                        <div id="relation" flex="" class="m-input m-input-text m-input-floating-label" style="font-size: 14px;">您是孩子的：</div>
                    </div>
                </div>
            </div>
        </form>
        <div class="m-button m-button-default m-button-block" style="width: 90px; margin: 32px auto 0px;" onclick="doSubmit()">提交</div>
    </div>
</div>
<form id="phone-form">
    {{.xsrfdata}}
    <input type="hidden" id="mobile" name="mobile" value="">
</form>
</body>

<script type="text/javascript">

    var canSubmit = true,
        mobileReg = /^[1][3,4,5,7,8,9][0-9]{9}$/,
        relationJson = eval({{.relationJson}}),
        seconds = 60,
        canRequestCode = true;

    function doSubmit() {

        var phone = $('#phone').val();
        if (phone.length <= 0) {
            layer.open({content: '请输入您的手机号', skin: 'msg', time: 2});
            return false;
        }
        if (!mobileReg.test(phone)) {
            layer.open({content: '请输入正确的手机号', skin: 'msg', time: 2});
            return false;
        }
        if ($('#verify_code').val().length <= 0) {
            layer.open({content: '请输入手机验证码', skin: 'msg', time: 2});
            return false;
        }
        if ($('#real_name').val().length <= 0) {
            layer.open({content: '请输入您的姓名', skin: 'msg', time: 2});
            return false;
        }
        if ($('#student_relation').val().length <= 0) {
            layer.open({content: '请选择您与孩子的关系', skin: 'msg', time: 2});
            return false;
        }

        if (!canSubmit) return false;
        var loadIndex = layer.open({type: 2});
        canSubmit = false;

        $.ajax({
            url: '{{urlfor "parent.IndexController.DoInviteRegister"}}',
            type: 'POST',
            data: $('#data-form').serialize(),
            dataType: 'json',
            success: function (res) {

                layer.close(loadIndex);
                canSubmit = true;

                layer.open({content: res.msg, skin: 'msg', time: 2});
                if (res.status == 1) {
                    setTimeout(function () {
                        location.href = '{{urlfor "parent.IndexController.Index"}}';
                    }, 1000);
                }

            }
        });

    }

    function loadSelect() {

        relation = new MobileSelect({
            trigger: '#relation',
            title: '您是孩子的',
            wheels: [
                {data: relationJson}
            ],
            callback: function(indexArr, data) {
                var id = data[0].id;
                $('#student_relation').val(id);
            }
        });

    }

    function getVerifyCode() {

        var mobile = $('#phone').val();
        if (mobile.length <= 0) {
            layer.open({content: '请输入手机号', skin: 'msg', time: 2});
            return false;
        }
        if (!mobileReg.test(mobile)) {
            layer.open({content: '请输入正确的手机号', skin: 'msg', time: 2});
            return false;
        }
        $('#mobile').val(mobile);

        if (!canRequestCode) {
            return false;
        }

        canRequestCode = false;
        $('#get-verify-code').text(seconds+'s');
        var getCodeLoadIndex = layer.open({type: 2});

        $.ajax({
            url: '{{urlfor "controllers.CommonController.SendMobileMsg"}}',
            type: 'POST',
            data: $('#phone-form').serialize(),
            dataType: 'json',
            success: function (res) {

                layer.close(getCodeLoadIndex);
                layer.open({content: res.msg, skin: 'msg', time: 2});

            }
        });

        var timer = setInterval(function () {
            seconds--;
            if (seconds > 0) {
                $('#get-verify-code').text(seconds+'s');
            } else {
                $('#get-verify-code').text('发送验证码');
                canRequestCode = true;
                clearInterval(timer);
                seconds = 60;
            }
        }, 1000);

    }

</script>

</html>